.machine-list {
  margin-bottom: 40px;

  >.machine {
    display: grid;
    grid-template: 'name'
                   'key'
                   'copy'
                   'regen'
                   'edit'
                   'deact'
                   'delete'
                   / 1fr;
    grid-gap: 20px;

    @media #{$sm} {
      grid-template: 'name   name   name   name  '
                     'key    key    key    copy   '
                     'regen  edit   deact  delete'
                    / 1fr    1fr    1fr    1fr;
    }

    >h2 {
      grid-area: name;
    }

    >.api-key-text {
      grid-area: key;

      display: grid;
      grid-template: auto / auto 1fr;
      grid-column-gap: 20px;
      align-items: center;

      >input.api-key {
        font-family: monospace;
      }
    }

    >.copy-button {
      grid-area: copy;
    }

    >.edit-form {
      grid-area: edit;
    }

    >.regenerate-form {
      grid-area: regen;
    }

    >.deactivate-form {
      grid-area: deact;
    }

    >.delete-form {
      grid-area: delete;
    }

    // Don't use basic form template in these button forms
    >form {
      grid-template: auto / auto;
    }
  }
}

.inactive-machine-list {
  >.machine {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 1rem;
    align-items: center;
  }
}
